<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>小木木登录成功</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/AdminLTE/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/AdminLTE/dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
        page. However, you can choose any other skin. Make sure you
        apply the skin class to the body tag so the changes take effect.
  -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/AdminLTE/dist/css/skins/skin-blue.min.css">

  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/custom/my.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
    
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper" id="wrapper">

  <!-- Main Header -->
  <header class="main-header">

    <!-- Logo -->
    <a href="${pageContext.request.contextPath}/panel" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><i class="fa fa-pagelines"></i></span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><i class="fa fa-pagelines"></i>小木木<i class="fa fa-pagelines"></i></span>
    </a>

    <!-- Header Navbar -->
    <nav class="navbar navbar-static-top" role="navigation">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>
      <!-- Navbar Right Menu -->
      <div id="customMenu" class="navbar-custom-menu">
        <ul class="nav navbar-nav">
               
          <!-- User Account Menu -->
          <li class="dropdown user user-menu">
            <!-- Menu Toggle Button -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <!-- The user image in the navbar-->
              <img src="${pageContext.request.contextPath}/static/img/atm.jpg" class="user-image" alt="User Image">
              <!-- hidden-xs hides the username on small devices so only the image appears. -->
              <span class="hidden-xs">${user}</span>
            </a>
            <ul class="dropdown-menu">
              <!-- The user image in the menu -->
              <li class="user-header">
                <img src="${pageContext.request.contextPath}/static/img/atm.jpg" class="img-circle" alt="User Image">

                <p>
                    ${user}             
                </p>
              </li>
              <!-- Menu Body -->
              <li class="user-body hide">

              </li>
              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-left">
                  <a @click.self="changePassword($event)" rel="${user}" class="btn btn-default btn-flat"><i class="fa fa-key"></i> 修改密码</a>              
                </div>
                <div class="pull-right">
                  <a href="javascript:logout()" class="btn btn-default btn-flat"><i class="fa fa-power-off"></i> 退出系统</a>
                </div>              
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  
  
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">

    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
    
     <!-- Sidebar user panel (optional) -->
      <div id="userPanel" class="user-panel">
        <div class="pull-left image">
          <img v-if="robotInfo.avatar != ''" :src="robotInfo.avatar" class="img-circle" alt="User Image">
          <img v-else src="${pageContext.request.contextPath}/static/img/astroboy.jpg" class="img-circle" alt="User Image">          
        </div>
        <div class="pull-left info">
          <p v-if="robotInfo.nickName != ''">我是{{robotInfo.nickName}}</p>
          <p v-else>小机器人</p>
          <!-- Status -->
          <a v-if="robotInfo.healthy" href="#"><i class="fa fa-thumbs-o-up text-success"></i> 在线</a>
          <a v-else-if="robotInfo.online" href="#"><i class="fa fa-wrench text-warning"></i> 故障，恢复中...</a>          
          <a v-else href="#"><i class="fa fa-close text-danger"></i> 离线</a>         
        </div>
      </div>
      
      <div id="sidebar">
	      <!-- Sidebar Menu -->
	      <ul class="sidebar-menu">
	        <li class="header">导航</li>	        
       	        
	        <!-- Optionally, you can add icons to the links -->
            <li class="treeview">
              <a href="#"><i class="fa fa-wechat"></i> <span>机器人管理</span>
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                  <li v-if="!robotInfo.online"><a href="#" @click="robotLoginClick"><i class="fa fa-chain"></i>登录</a></li>
                  <li v-else><a href="#" @click="robotLogoutClick"><i class="fa fa-chain"></i>下线</a></li>
              </ul>
            </li>
            	        
            <li class="treeview" v-if="robotInfo.online">
              <a href="#"><i class="fa fa-users"></i> <span>通讯录管理</span>
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                  <li><a href="#" @click="groupListClick"><i class="fa fa-chain"></i>群列表</a></li>
                  <li><a href="#" @click="friendListClick"><i class="fa fa-chain"></i>好友列表</a></li>
              </ul>
            </li>
            
            <li class="treeview" v-if="robotInfo.online">
              <a href="#"><i class="fa fa-envelope-o"></i> <span>消息管理</span>
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                  <li><a href="#" @click="welcomeMsgListClick"><i class="fa fa-chain"></i>欢迎消息列表</a></li>
                  <li><a href="#" @click="createWelcomeMsg"><i class="fa fa-chain"></i>新增欢迎消息</a></li>
                  <li><a href="#" @click="sendMsgClick"><i class="fa fa-chain"></i>发送消息</a></li>
              </ul>
            </li>  
                     
            <li class="treeview" v-if="robotInfo.online">
              <a href="#"><i class="fa fa-clock-o"></i> <span>定时任务管理</span>
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                  <li><a href="#" @click="scheduledTaskListClick"><i class="fa fa-chain"></i>定时任务列表</a></li>
                  <li><a href="#" @click="createScheduledTask"><i class="fa fa-chain"></i>新增定时任务</a></li>
              </ul>
            </li>
                       
            <li class="treeview" v-if="robotInfo.online">
              <a href="#"><i class="fa fa-mail-reply"></i> <span>自动回复管理</span>
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                  <li><a href="#" @click="autoReplyListClick"><i class="fa fa-chain"></i>群自动回复列表</a></li>
                  <li><a href="#" @click="createAutoReply"><i class="fa fa-chain"></i>新增群自动回复</a></li>
                  <li><a href="#" @click="friendAutoReplyClick"><i class="fa fa-chain"></i>好友自动回复设定</a></li>
              </ul>
            </li>
            
            <li class="treeview">
              <a href="#"><i class="fa fa-wrench"></i> <span>系统管理</span>
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                  <li><a href="#" @click="adminListClick"><i class="fa fa-chain"></i>管理员列表</a></li>
                  <li><a href="#" @click="createAdmin"><i class="fa fa-chain"></i>新增管理员</a></li>
                  <li><a href="#" @click="readLog"><i class="fa fa-chain"></i>查看日志</a></li>
              </ul>
            </li>
                        
	      </ul>
	      <!-- /.sidebar-menu -->      
      </div>
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div id="breadcrumb">
        <ol class="breadcrumb">
          <li><a href="${pageContext.request.contextPath}/panel"><i class="fa fa-home"></i> Home</a></li>
          <li class="active"><small>{{currentLocation}}</small></li>
        </ol>    
      </div>
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Your Page Content Here -->
        <div class="row">
            <div id="customContent" class="col-md-12"> 
                <component :is="currentView" :list="resultList" :group-name="groupName" :qrurl="qrCodeFileUrl" :msg="remoteMsg"
                            @button-click="realActionHandler" 
                            @auto-reply-button-click="realAutoReplyActionHandler" 
                            @welcome-msg-button-click="realWelcomeMsgActionHandler" 
                            @scheduled-task-button-click="realScheduledTaskActionHandler"
                            @admin-button-click="realAdminActionHandler"
                            @log-button-click="realLogActionHandler"
                            @robot-login-click="realRobotLoginActionHandler"></component>
            </div>
        </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- Main Footer -->
  <footer class="main-footer">
    <!-- To the right -->
    <div class="pull-right hidden-xs">
                    有浪花的小恒星
    </div>
    <!-- Default to the left -->
    <strong>Copyright &copy; 2017 <a href="#"><i class="fa fa-globe"></i> 阅读星球</a>.</strong> All rights reserved.
  </footer>

  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.2.3 -->
<script src="${pageContext.request.contextPath}/static/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="${pageContext.request.contextPath}/static/AdminLTE/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="${pageContext.request.contextPath}/static/AdminLTE/dist/js/app.min.js"></script>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/custom/websocket.js"></script>


<script type="text/x-template" id="groupListTemplate">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">群列表</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body table-responsive no-padding">
        <table class="table table-bordered table-hover">
            <thead>        
                <tr>
                    <th>群编号</th>
                    <th>群名称</th>
                    <th>群人数</th>
                    <th>群状态</th>
                    <th>打卡功能</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.no}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.num}}</td>
                    
                    <td v-if="item.underCtrl">
                        <span class="label label-success">已收编</span>
                    </td>
                    <td v-else>
                        <span class="label label-default">未收编</span>
                    </td>
                                        
                    <td v-if="item.signIn">
                        <span class="label label-success">已 开启</span>
                    </td>
                    <td v-else>
                       <span class="label label-default">未开启</span>
                    </td> 
                                       
                    <td>
                        <button class="btn btn-xs btn-primary" :name="item.name" :value="item.userName" @click.self="buttonClick($event, 'CHECK_MEMBER')" title="查看群成员">
                            <i class="fa fa-search" @click.stop="buttonClick($event, 'CHECK_MEMBER')">
                            </i>
                        </button>

                        <button v-if="item.underCtrl" class="btn btn-xs btn-success" :value="item.userName" @click.self="buttonClick($event, 'REMOVE_FROM_CTRL')" title="取消收编">
                            <i class="fa fa-registered" @click.stop="buttonClick($event, 'REMOVE_FROM_CTRL')">
                            </i>
                        </button>
                        <button v-else class="btn btn-xs btn-success" :value="item.userName" @click.self="buttonClick($event, 'ADD_TO_CTRL')" title="收编">
                            <i class="fa fa-registered" @click.stop="buttonClick($event, 'ADD_TO_CTRL')">
                            </i>
                        </button>
                        
                        <button v-if="item.underCtrl && item.signIn" class="btn btn-xs btn-info" :value="item.userName" @click.self="buttonClick($event, 'DISABLE_SIGN_IN')" title="取消打卡">
                            <i class="fa fa-sign-in" @click.stop="buttonClick($event, 'DISABLE_SIGN_IN')">
                            </i>
                        </button>
                        <button v-if="item.underCtrl && !item.signIn" class="btn btn-xs btn-info" :value="item.userName" @click.self="buttonClick($event, 'ENABEL_SIGN_IN')" title="开启打卡">
                            <i class="fa fa-sign-in" @click.stop="buttonClick($event, 'ENABEL_SIGN_IN')">
                            </i>
                        </button>                       

                        <button class="btn btn-xs btn-warning" :value="item.userName" @click.self="buttonClick($event, 'UPDATE_GROUP')" title="更新群信息">
                            <i class="fa  fa-refresh" @click.stop="buttonClick($event, 'UPDATE_GROUP')">
                            </i>
                        </button>

                        <button class="btn btn-xs btn-warning" :value="item.userName" @click.self="buttonClick($event, 'SEND_WELCOME_MSG')" title="发送欢迎信息">
                            <i class="fa  fa-wikipedia-w" @click.stop="buttonClick($event, 'SEND_WELCOME_MSG')">
                            </i>
                        </button>

                    </td>
                </tr>
            </tbody>
        </table>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
    
</script>

<script type="text/x-template" id="friendListTemplate">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">好友列表</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body table-responsive no-padding">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>昵称</th>
                    <th>性别</th>
                    <th>省份</th>
                    <th>城市</th>
                    <th>是否管理员</th>
                    <th>是否接收通知</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.nickName}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.province}}</td>
                    <td>{{item.city}}</td>
                    
                    <td v-if="item.isAdmin">
                        <span class="label label-success">是</span>
                    </td>
                    <td v-else>
                        <span class="label label-default">否</span>
                    </td>

                    <td v-if="item.receiveMsg">
                        <span class="label label-success">是</span>
                    </td>
                    <td v-else>
                        <span class="label label-default">否</span>
                    </td>
                                                  
                    <td>
                        <button v-if="item.isAdmin" class="btn btn-xs btn-primary" :value="item.userName" @click.self="buttonClick($event, 'REMOVE_FROM_ADMIN')" title="取消管理员">
                            <i class="fa fa-user" @click.stop="buttonClick($event, 'REMOVE_FROM_ADMIN')">
                            </i>
                        </button>
                        <button v-else class="btn btn-xs btn-primary" :value="item.userName" @click.self="buttonClick($event, 'ADD_TO_ADMIN')" title="设为管理员">
                            <i class="fa fa-user" @click.stop="buttonClick($event, 'ADD_TO_ADMIN')">
                            </i>
                        </button>
                        
                        <button v-if="item.isAdmin && item.receiveMsg" class="btn btn-xs btn-info" :value="item.userName" @click.self="buttonClick($event, 'DISABLE_RECEIVE_MSG')" title="取消接收通知">
                            <i class="fa fa-bell-o" @click.stop="buttonClick($event, 'DISABLE_RECEIVE_MSG')">
                            </i>
                        </button>
                        <button v-if="item.isAdmin && !item.receiveMsg" class="btn btn-xs btn-info" :value="item.userName" @click.self="buttonClick($event, 'ENABEL_RECEIVE_MSG')" title="开启接收通知">
                            <i class="fa fa-bell-o" @click.stop="buttonClick($event, 'ENABEL_RECEIVE_MSG')">
                            </i>
                        </button>
                    </td>
                </tr>  
            </tbody>
        </table>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
</script>

<script type="text/x-template" id="memberListTemplate">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">{{groupName}}成员列表</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body table-responsive no-padding">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>昵称</th>
                    <th>群昵称</th>
                    <th>今天是否打卡</th>
                    <th>本周打卡次数</th>
                    <th>累计打卡次数</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.nickName}}</td>
                    <td>{{item.nickNameInGroup}}</td>

                    <td v-if="item.signInToday">
                        <span class="label label-success">是</span>
                    </td>
                    <td v-else>
                        <span class="label label-primary"></span>
                    </td>

                    <td v-if="item.numOfWeek > 0" >{{item.numOfWeek}}</td>
                    <td v-else ></td>

                    <td v-if="item.numOfTotal > 0" >{{item.numOfTotal}}</td>
                    <td v-else ></td>

                                           
                    <td>
                       <button v-if="!item.signInToday" class="btn btn-xs btn-info" :name="groupName" :value="item.originalNickName" @click.self="buttonClick($event, 'SIGN_IN')" title="打卡">
                           <i class="fa fa-sign-in" @click.stop="buttonClick($event, 'SIGN_IN')">
                           </i>
                       </button>
                    </td>

                </tr>  
            </tbody>
        </table>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
</script>
        
<script type="text/x-template" id="sendMsgTemplate">

<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h4 class="box-title">发送消息</h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form" @submit.prevent="sendMsgFormSubmit()" @reset="sendMsgFormReset()">
          <!-- textarea -->
          <div class="form-group">
            <label>输入要发送的内容</label>
            <textarea v-model="requestParam.textToSend" name="textToSend" class="form-control" rows="3" placeholder="输入要发送的消息..." ></textarea>
          </div>

          <!-- radio -->
          <div class="form-group" style="display:none">
            <div class="radio">
              <label>
                <input type="radio" name="targetToSend" value="SEND_TO_WX_GROUP" checked>
                                                  发消息给群
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="targetToSend" value="SEND_TO_CUSTOM_GROUP">
                                                   发消息给分组
              </label>
            </div>
          </div>

          <!-- Select multiple-->
          <div class="form-group">
            <label>选择要发送的群</label>
            <select multiple v-model="requestParam.wxGroupSelected" class="form-control" name="wxGroupSelected" id="wxGroupSelected">             
              <option v-for="item in list" :value="item.userName">{{item.name}}</option>
            </select>
          </div>

          <!-- Select -->
          <div class="form-group"  style="display:none">
            <label>选择分组</label>
            <select class="form-control" name="customGroupSelected">
              <option>请选择</option>
            </select>
          </div>

        <div class="form-group" v-show="requestParam.selectedImgUrl != '' ">
          <label>要发送的图片</label>
          <img :src="requestParam.selectedImgUrl" class="img-responsive" width=480px height=320px/>
          <button @click.stop.prevent="removePic" class="btn btn-danger btn-sm">删除图片</button>
        </div>

        <div class="form-group" v-show="requestParam.selectedImgUrl == '' ">
          <label for="exampleInputFile">选择要发送的图片</label>
          <input type="file" @change="fileChange($event)" accept="image/png,image/jpeg,image/gif" id="imgToSend">
        </div>
    
        <div class="box-footer">
          <button type="reset" class="btn btn-warning">重置</button>
          <button type="submit" class="btn btn-primary">发送</button>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>

</script>


<script type="text/x-template" id="autoReplyListTemplate">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">群自动回复关键词列表</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body table-responsive no-padding">
        <table class="table table-bordered table-hover">
            <thead>        
                <tr>
                    <th>关键词</th>
                    <th>微信群</th>
                    <th>过滤用户</th>
                    <th>发送文字</th>
                    <th>发送图片</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.keyword}}</td>
                    <td :title="item.group">{{(item.group.length > 10)? (item.group.substring(0, 9) + ' ...') : item.group}}</td>
                    <td :title="item.ignoredSender">{{(item.ignoredSender.length > 10)? (item.ignoredSender.substring(0, 9) + ' ...') : item.ignoredSender}}</td>
                    <td :title="item.textMsg">{{(item.textMsg.length > 10)? (item.textMsg.substring(0, 9) + ' ...') : item.textMsg}}</td>
                    <td :title="item.imgMsg">{{(item.imgMsg.length > 10)? (item.imgMsg.substring(0, 9) + ' ...') : item.imgMsg}}</td>

                    <td v-if="item.enabled">
                        <span class="label label-success">启用</span>
                    </td>
                    <td v-else>
                        <span class="label label-default">停用</span>
                    </td>                                       
                                       
                    <td>
                        <button class="btn btn-xs btn-primary" :value="item.keyword" @click.self="buttonClick($event, 'READ_AUTO_REPLY')" title="查看">
                            <i class="fa fa-search" @click.stop="buttonClick($event, 'READ_AUTO_REPLY')">
                            </i>
                        </button>

                        <button class="btn btn-xs btn-info" :value="item.keyword" @click.self="buttonClick($event, 'EDIT_AUTO_REPLY')" title="编辑">
                            <i class="fa fa-edit" @click.stop="buttonClick($event, 'EDIT_AUTO_REPLY')">
                            </i>
                        </button>

                        <button v-if="item.enabled" class="btn btn-xs btn-warning" :value="item.keyword" @click.self="buttonClick($event, 'DISABLE_AUTO_REPLY')" title="停用">
                            <i class="fa fa-toggle-on" @click.stop="buttonClick($event, 'DISABLE_AUTO_REPLY')">
                            </i>
                        </button>
                        <button v-else class="btn btn-xs btn-warning" :value="item.keyword" @click.self="buttonClick($event, 'ENABLE_AUTO_REPLY')" title="启用">
                            <i class="fa fa-toggle-off" @click.stop="buttonClick($event, 'ENABLE_AUTO_REPLY')">
                            </i>
                        </button>

                        <button class="btn btn-xs btn-danger" :value="item.keyword" @click.self="buttonClick($event, 'REMOVE_AUTO_REPLY')" title="删除">
                            <i class="fa fa-trash-o" @click.stop="buttonClick($event, 'REMOVE_AUTO_REPLY')">
                            </i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
    
</script>

<script type="text/x-template" id="createAutoReplyTemplate">
<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h4 class="box-title">新增自动回复</h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form" @submit.prevent="formSubmit()" @reset="formReset()">
        
          <div class="form-group">
            <label for="exampleInputEmail1">关键词</label>
            <input type="text" v-model="requestParam.keyword" class="form-control" placeholder="输入关键词（支持正则表达式，保留关键词<image>代表收到图片）">
          </div>

          <!-- Select multiple-->
          <div class="form-group">
            <label>微信群</label>
            <select multiple v-model="requestParam.wxGroupSelected" class="form-control" name="wxGroupSelected" id="wxGroupSelected">             
              <option v-for="item in list" :value="item.userName">{{item.name}}</option>
            </select>
          </div>

          <!-- Select -->
          <div class="form-group"  style="display:none">
            <label>选择分组</label>
            <select class="form-control" name="customGroupSelected">
              <option>请选择</option>
            </select>
          </div>
          
          <!-- textarea -->
          <div class="form-group">
            <label>过滤用户</label>
            <textarea v-model="requestParam.ignoredSender" class="form-control" rows="3" placeholder="输入需要过滤的用户昵称（多个用户用英文;分割）" ></textarea>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之1</label>
            <textarea v-model="requestParam.textToSend1" class="form-control" rows="3" placeholder="输入要发送的消息（<sender>用于在消息中替换为关键词发送者的昵称）" ></textarea>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之2</label>
            <textarea v-model="requestParam.textToSend2" class="form-control" rows="3" placeholder="输入要发送的消息（<sender>用于在消息中替换为关键词发送者的昵称）" ></textarea>
          </div>

        <div class="form-group" v-show="requestParam.selectedImgUrl != '' ">
          <label>要发送的图片</label>
          <img :src="requestParam.selectedImgUrl" class="img-responsive" width=640px height=480px/>
          <button @click.stop.prevent="removePic" class="btn btn-danger btn-sm">删除图片</button>
        </div>
          
        <div class="form-group" v-show="requestParam.selectedImgUrl == '' ">
          <label for="exampleInputFile">选择要发送的图片</label>
          <input type="file" @change="fileChange($event)" accept="image/png,image/jpeg,image/gif" name="imgToSend" id="imgToSend">
        </div>
    
        <div class="box-footer">
          <button type="reset" class="btn btn-warning">重置</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>
</script>

<script type="text/x-template" id="readAutoReplyTemplate">
<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h4 class="box-title">查看自动回复</h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form">
        
          <div class="form-group">
            <label for="exampleInputEmail1">关键词</label>
            <input type="text" readonly v-model="list.keyword" class="form-control" >
          </div>

          <!-- Select multiple-->
          <div class="form-group">
            <label>微信群</label>
            <select multiple readonly v-model="list.wxGroupSelected" class="form-control" id="wxGroupSelected">             
              <option v-for="item in list.wxGroupAll" :value="item.userName">{{item.name}}</option>
            </select>
          </div>

          <!-- Select -->
          <div class="form-group" style="display:none">
            <label>选择分组</label>
            <select class="form-control" name="customGroupSelected">
              <option>请选择</option>
            </select>
          </div>
          
          <!-- textarea -->
          <div class="form-group">
            <label>过滤用户</label>
            <textarea readonly v-model="list.ignoredSender" class="form-control" rows="3" ></textarea>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之1</label>
            <textarea readonly v-model="list.textToSend1" class="form-control" rows="3" ></textarea>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之2</label>
            <textarea readonly v-model="list.textToSend2" class="form-control" rows="3" ></textarea>
          </div>
          
        <div class="form-group" v-if="list.selectedImgUrl != '' ">
          <label>要发送的图片</label>
          <img :src="list.selectedImgUrl" class="img-responsive" width=640px height=480px/>
        </div>
    
        <div class="box-footer">
          <button @click.stop.prevent="exit" class="btn btn-primary">退出</button>
          <button @click.stop.prevent="edit" class="btn btn-primary">编辑</button>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>
</script>

<script type="text/x-template" id="editAutoReplyTemplate">
<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h4 class="box-title">编辑自动回复</h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form" @submit.prevent="formSubmit()">
        
          <div class="form-group">
            <label for="exampleInputEmail1">关键词</label>
            <input type="text" readonly v-model="list.keyword" class="form-control" placeholder="输入关键词（支持正则表达式，保留关键词<image>代表收到图片）">
          </div>

          <!-- Select multiple-->
          <div class="form-group">
            <label>微信群</label>
            <select multiple v-model="list.wxGroupSelected" class="form-control" id="wxGroupSelected">             
              <option v-for="item in list.wxGroupAll" :value="item.userName">{{item.name}}</option>
            </select>
          </div>

          <!-- Select -->
          <div class="form-group" style="display:none">
            <label>选择分组</label>
            <select class="form-control" name="customGroupSelected">
              <option>请选择</option>
            </select>
          </div>
          
          <!-- textarea -->
          <div class="form-group">
            <label>过滤用户</label>
            <textarea v-model="list.ignoredSender" class="form-control" rows="3" placeholder="输入需要过滤的用户昵称（多个用户用英文;分割）" ></textarea>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之1</label>
            <textarea v-model="list.textToSend1" class="form-control" rows="3" placeholder="输入要发送的消息（<sender>用于在消息中替换为关键词发送者的昵称）" ></textarea>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之2</label>
            <textarea v-model="list.textToSend2" class="form-control" rows="3" placeholder="输入要发送的消息（<sender>用于在消息中替换为关键词发送者的昵称）" ></textarea>
          </div>
          
        <div class="form-group" v-show="list.selectedImgUrl != '' " id="oldPic">
          <label>要发送的图片</label>
          <img :src="list.selectedImgUrl" class="img-responsive" width=640px height=480px/>
          <button @click.stop.prevent="removePic" class="btn btn-danger btn-sm">删除图片</button>
        </div>

        <div class="form-group" id="selectPic" v-show="list.selectedImgUrl == '' ">
          <label for="exampleInputFile">选择要发送的图片</label>
          <input type="file" @change="fileChange($event)" accept="image/png,image/jpeg,image/gif" id="imgToSend">          
        </div>
    
        <div class="box-footer">
          <button @click.stop.prevent="exit" class="btn btn-warning">退出</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>
</script>


<script type="text/x-template" id="welcomeMsgListTemplate">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">欢迎消息列表</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body table-responsive no-padding">
        <table class="table table-bordered table-hover">
            <thead>        
                <tr>
                    <th>欢迎消息名称</th>
                    <th>入群人数设定</th>
                    <th>消息接收群</th>
                    <th>发送文字</th>
                    <th>发送图片</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.keyword}}</td>
                    <td>{{item.threshold}}</td>
                    <td :title="item.group">{{(item.group.length > 10)? (item.group.substring(0, 9) + ' ...') : item.group}}</td>
                    <td :title="item.textMsg">{{(item.textMsg.length > 10)? (item.textMsg.substring(0, 9) + ' ...') : item.textMsg}}</td>
                    <td :title="item.imgMsg">{{(item.imgMsg.length > 10)? (item.imgMsg.substring(0, 9) + ' ...') : item.imgMsg}}</td>

                    <td v-if="item.enabled">
                        <span class="label label-success">启用</span>
                    </td>
                    <td v-else>
                        <span class="label label-default">停用</span>
                    </td>                                       
                                       
                    <td>
                        <button class="btn btn-xs btn-primary" :value="item.keyword" @click.self="buttonClick($event, 'READ_WELCOME_MSG')" title="查看">
                            <i class="fa fa-search" @click.stop="buttonClick($event, 'READ_WELCOME_MSG')">
                            </i>
                        </button>

                        <button class="btn btn-xs btn-info" :value="item.keyword" @click.self="buttonClick($event, 'EDIT_WELCOME_MSG')" title="编辑">
                            <i class="fa fa-edit" @click.stop="buttonClick($event, 'EDIT_WELCOME_MSG')">
                            </i>
                        </button>

                        <button v-if="item.enabled" class="btn btn-xs btn-warning" :value="item.keyword" @click.self="buttonClick($event, 'DISABLE_WELCOME_MSG')" title="停用">
                            <i class="fa fa-toggle-on" @click.stop="buttonClick($event, 'DISABLE_WELCOME_MSG')">
                            </i>
                        </button>
                        <button v-else class="btn btn-xs btn-warning" :value="item.keyword" @click.self="buttonClick($event, 'ENABLE_WELCOME_MSG')" title="启用">
                            <i class="fa fa-toggle-off" @click.stop="buttonClick($event, 'ENABLE_WELCOME_MSG')">
                            </i>
                        </button>

                        <button class="btn btn-xs btn-danger" :value="item.keyword" @click.self="buttonClick($event, 'REMOVE_WELCOME_MSG')" title="删除">
                            <i class="fa  fa-trash-o" @click.stop="buttonClick($event, 'REMOVE_WELCOME_MSG')">
                            </i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
    
</script>

<script type="text/x-template" id="createWelcomeMsgTemplate">
<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h4 class="box-title">新增欢迎消息</h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form" @submit.prevent="formSubmit()" @reset="formReset()">
        
          <div class="form-group">
            <label for="exampleInputEmail1">欢迎消息名称</label>
            <input type="text" v-model="requestParam.keyword" class="form-control" placeholder="输入消息名称">
          </div>

          <div class="form-group">
            <label for="exampleInputEmail1">入群人数设定</label>
            <input type="text" v-model="requestParam.threshold" class="form-control" placeholder="输入触发欢迎消息的入群人数">
          </div>

          <!-- Select multiple-->
          <div class="form-group">
            <label>消息接收群</label>
            <select multiple v-model="requestParam.wxGroupSelected" class="form-control" id="wxGroupSelected">             
              <option v-for="item in list" :value="item.userName">{{item.name}}</option>
            </select>
          </div>

          <!-- Select -->
          <div class="form-group"  style="display:none">
            <label>选择分组</label>
            <select class="form-control" name="customGroupSelected">
              <option>请选择</option>
            </select>
          </div>          

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之1</label>
            <textarea v-model="requestParam.textToSend1" class="form-control" rows="3" placeholder="输入要发送的消息" ></textarea>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之2</label>
            <textarea v-model="requestParam.textToSend2" class="form-control" rows="3" placeholder="输入要发送的消息" ></textarea>
          </div>

        <div class="form-group" v-show="requestParam.selectedImgUrl != '' ">
          <label>要发送的图片</label>
          <img :src="requestParam.selectedImgUrl" class="img-responsive" width=640px height=480px/>
          <button @click.stop.prevent="removePic" class="btn btn-danger btn-sm">删除图片</button>
        </div>
          
        <div class="form-group" v-show="requestParam.selectedImgUrl == '' ">
          <label for="exampleInputFile">选择要发送的图片</label>
          <input type="file" @change="fileChange($event)" accept="image/png,image/jpeg,image/gif" name="imgToSend" id="imgToSend">
        </div>
    
        <div class="box-footer">
          <button type="reset" class="btn btn-warning">重置</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>
</script>

<script type="text/x-template" id="readWelcomeMsgTemplate">
<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h4 class="box-title">查看欢迎消息 </h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form">
        
          <div class="form-group">
            <label for="exampleInputEmail1">欢迎消息名称</label>
            <input type="text" readonly v-model="list.keyword" class="form-control" >
          </div>

          <div class="form-group">
            <label for="exampleInputEmail1">入群人数设定</label>
            <input type="text" readonly v-model="list.threshold" class="form-control" >
          </div>

          <!-- Select multiple-->
          <div class="form-group">
            <label>消息接收群</label>
            <select multiple readonly v-model="list.wxGroupSelected" class="form-control" id="wxGroupSelected">             
              <option v-for="item in list.wxGroupAll" :value="item.userName">{{item.name}}</option>
            </select>
          </div>

          <!-- Select -->
          <div class="form-group" style="display:none">
            <label>选择分组</label>
            <select class="form-control" name="customGroupSelected">
              <option>请选择</option>
            </select>
          </div>          

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之1</label>
            <textarea readonly v-model="list.textToSend1" class="form-control" rows="3" ></textarea>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之2</label>
            <textarea readonly v-model="list.textToSend2" class="form-control" rows="3" ></textarea>
          </div>
          
        <div class="form-group" v-if="list.selectedImgUrl != '' ">
          <label>要发送的图片</label>
          <img :src="list.selectedImgUrl" class="img-responsive" width=640px height=480px/>
        </div>

    
        <div class="box-footer">
          <button @click.stop.prevent="exit" class="btn btn-primary">退出</button>
          <button @click.stop.prevent="edit" class="btn btn-primary">编辑</button>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>
</script>

<script type="text/x-template" id="editWelcomeMsgTemplate">
<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h4 class="box-title">编辑欢迎消息</h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form" @submit.prevent="formSubmit()">
        
          <div class="form-group">
            <label for="exampleInputEmail1">欢迎消息名称</label>
            <input type="text" readonly v-model="list.keyword" class="form-control" placeholder="输入消息名称">
          </div>

          <div class="form-group">
            <label for="exampleInputEmail1">入群人数设定</label>
            <input type="text" v-model="list.threshold" class="form-control" placeholder="输入触发欢迎消息的入群人数">
          </div>

          <!-- Select multiple-->
          <div class="form-group">
            <label>消息接收群</label>
            <select multiple v-model="list.wxGroupSelected" class="form-control" id="wxGroupSelected">             
              <option v-for="item in list.wxGroupAll" :value="item.userName">{{item.name}}</option>
            </select>
          </div>

          <!-- Select -->
          <div class="form-group"  style="display:none">
            <label>选择分组</label>
            <select class="form-control" name="customGroupSelected">
              <option>请选择</option>
            </select>
          </div>          

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之1</label>
            <textarea v-model="list.textToSend1" class="form-control" rows="3" placeholder="输入要发送的消息" ></textarea>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之2</label>
            <textarea v-model="list.textToSend2" class="form-control" rows="3" placeholder="输入要发送的消息" ></textarea>
          </div>
          
        <div class="form-group" v-show="list.selectedImgUrl != '' " id="oldPic">
          <label>要发送的图片</label>
          <img :src="list.selectedImgUrl" class="img-responsive" width=640px height=480px/>
          <button @click.stop.prevent="removePic" class="btn btn-danger btn-sm">删除图片</button>
        </div>

        <div class="form-group" id="selectPic" v-show="list.selectedImgUrl == '' ">
          <label for="exampleInputFile">选择要发送的图片</label>
          <input type="file" @change="fileChange($event)" accept="image/png,image/jpeg,image/gif" id="imgToSend">          
        </div>
    
        <div class="box-footer">
          <button @click.stop.prevent="exit" class="btn btn-warning">退出</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>
</script>

<script type="text/x-template" id="welcomeMsgTemplate">
<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h4 class="box-title"> </h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form" @submit.prevent="formSubmit()" @reset="formReset()">
        
          <div class="form-group">
            <label for="exampleInputEmail1">欢迎消息名称</label>
            <input type="text" v-if="mode == 'READ_MODE' || mode == 'EDIT_MODE'" readonly v-model="requestParam.keyword" class="form-control" placeholder="输入消息名称">
            <input type="text" v-else v-model="requestParam.keyword" class="form-control" placeholder="输入消息名称">
          </div>

          <div class="form-group">
            <label for="exampleInputEmail1">入群人数设定</label>
            <input type="text" :readonly="mode == 'READ_MODE'" v-model="requestParam.threshold" class="form-control" placeholder="输入触发欢迎消息的入群人数">
          </div>

          <!-- Select multiple-->
          <div class="form-group">
            <label>消息接收群</label>
            <select multiple v-if="mode == 'CREATE_MODE'" v-model="requestParam.wxGroupSelected" class="form-control" id="wxGroupSelected">             
              <option v-for="item in list" :label="item.name" :value="item.userName">{{item.name}}</option>
            </select>
            <select multiple v-else v-model="requestParam.wxGroupSelected" class="form-control" id="wxGroupSelected">             
              <option v-for="item in requestParam.wxGroupAll" :label="item.name" :value="item.userName">{{item.name}}</option>
            </select>
          </div>

          <!-- Select -->
          <div class="form-group"  style="display:none">
            <label>选择分组</label>
            <select class="form-control" name="customGroupSelected">
              <option>请选择</option>
            </select>
          </div>          

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之1</label>
            <textarea :readonly="mode == 'READ_MODE'" v-model="requestParam.textToSend1" class="form-control" rows="3" placeholder="输入要发送的消息" ></textarea>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之2</label>
            <textarea :readonly="mode == 'READ_MODE'" v-model="requestParam.textToSend2" class="form-control" rows="3" placeholder="输入要发送的消息" ></textarea>
          </div>
          
        <div :hidden="mode == 'READ_MODE' || mode == 'EDIT_MODE'" class="form-group" id="selectPic">
          <label for="exampleInputFile">选择要发送的图片</label>
          <input type="file" @change="fileChange($event)" accept="image/png,image/jpeg,image/gif" name="imgToSend" id="imgToSend">
        </div>

        <div :hidden="mode == 'CREATE_MODE'" class="form-group" id="oldPic">
          <label>要发送的图片</label>
          <img :src="requestParam.imgToSend" class="img-responsive"/>
          <span :hidden="mode == 'READ_MODE'"><button @click="removePic" class="btn btn-danger btn-sm">删除图片</button></span>
        </div>
    
        <div class="box-footer">
          <span :hidden="mode == 'CREATE_MODE' || mode == 'EDIT_MODE'"><button @click.stop.prevent="convertToEditMode" class="btn btn-warning">编辑</button></span>
          <span :hidden="mode == 'READ_MODE' || mode == 'EDIT_MODE'"><button type="reset" class="btn btn-warning">重置</button></span>
          <span :hidden="mode == 'READ_MODE'"><button type="submit" class="btn btn-primary">保存</button></span>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>
</script>


<script type="text/x-template" id="scheduledTaskListTemplate">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">定时任务列表</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body table-responsive no-padding">
        <table class="table table-bordered table-hover">
            <thead>        
                <tr>
                    <th>任务名称</th>
                    <th>运行时间</th>
                    <th>消息接收群</th>
                    <th>消息接收好友</th>
                    <th>发送文字</th>
                    <th>发送图片</th>
                    <th>任务处理类</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

                <tr v-for="item in list">
                    <td>{{item.keyword}}</td>
                    <td>{{item.scheduledTime}}</td>
                    <td :title="item.groupReceivers">{{(item.groupReceivers.length > 10)? (item.groupReceivers.substring(0, 9) + ' ...') : item.groupReceivers}}</td>
                    <td :title="item.friendReceivers">{{(item.friendReceivers.length > 10)? (item.friendReceivers.substring(0, 9) + ' ...') : item.friendReceivers}}</td>
                    <td :title="item.textMsg">{{(item.textMsg.length > 10)? (item.textMsg.substring(0, 9) + ' ...') : item.textMsg}}</td>
                    <td :title="item.imgMsg">{{(item.imgMsg.length > 10)? (item.imgMsg.substring(0, 9) + ' ...') : item.imgMsg}}</td>
                    <td>{{item.jobClassName}}</td>

                    <td v-if="item.enabled">
                        <span class="label label-success">就绪</span>
                    </td>
                    <td v-else>
                        <span class="label label-default">暂停</span>
                    </td>                                       
                                       
                    <td>
                        <button class="btn btn-xs btn-primary" :value="item.keyword" @click.self="buttonClick($event, 'READ_SCHEDULED_TASK')" title="查看">
                            <i class="fa fa-search" @click.stop="buttonClick($event, 'READ_SCHEDULED_TASK')">
                            </i>
                        </button>

                        <button class="btn btn-xs btn-info" :value="item.keyword" @click.self="buttonClick($event, 'EDIT_SCHEDULED_TASK')" title="编辑">
                            <i class="fa fa-edit" @click.stop="buttonClick($event, 'EDIT_SCHEDULED_TASK')">
                            </i>
                        </button>

                        <button v-if="item.enabled" class="btn btn-xs btn-warning" :value="item.keyword" @click.self="buttonClick($event, 'DISABLE_SCHEDULED_TASK')" title="停用">
                            <i class="fa fa-toggle-on" @click.stop="buttonClick($event, 'DISABLE_SCHEDULED_TASK')">
                            </i>
                        </button>
                        <button v-else class="btn btn-xs btn-warning" :value="item.keyword" @click.self="buttonClick($event, 'ENABLE_SCHEDULED_TASK')" title="启用">
                            <i class="fa fa-toggle-off" @click.stop="buttonClick($event, 'ENABLE_SCHEDULED_TASK')">
                            </i>
                        </button>

                        <button class="btn btn-xs btn-danger" :value="item.keyword" @click.self="buttonClick($event, 'REMOVE_SCHEDULED_TASK')" title="删除">
                            <i class="fa fa-trash-o" @click.stop="buttonClick($event, 'REMOVE_SCHEDULED_TASK')">
                            </i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
    
</script>   

<script type="text/x-template" id="createScheduledTaskTemplate">
<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h4 class="box-title">新增定时任务</h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form" @submit.prevent="formSubmit()" @reset="formReset()">
        
          <div class="form-group">
            <label for="exampleInputEmail1">定时任务名称</label>
            <input type="text" v-model="requestParam.keyword" class="form-control" placeholder="输入任务名称">
          </div>

          <div class="form-group">
            <label for="exampleInputEmail1">运行时间（Cron表达式：秒 分 时 日 月 星期 年）</label>
            <input type="text" v-model="requestParam.scheduledTime" class="form-control" placeholder="输入任务运行时间">
            <button @click.stop.prevent="testCron" class="btn btn-default btn-sm">测试Cron</button>
          </div>

          <!-- Select multiple-->
          <div class="form-group">
            <label>消息接收群</label>
            <select multiple v-model="requestParam.wxGroupSelected" class="form-control" name="wxGroupSelected" id="wxGroupSelected">             
              <option v-for="item in list" :value="item.userName">{{item.name}}</option>
            </select>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>消息接收好友</label>
            <textarea v-model="requestParam.friendReceivers" class="form-control" rows="3" placeholder="输入接收消息的好友昵称（多个用户用英文;分割）" ></textarea>
          </div>

          <!-- Select -->
          <div class="form-group"  style="display:none">
            <label>选择分组</label>
            <select class="form-control" name="customGroupSelected">
              <option>请选择</option>
            </select>
          </div>          

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之1</label>
            <textarea v-model="requestParam.textToSend1" class="form-control" rows="3" placeholder="输入要发送的消息" ></textarea>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之2</label>
            <textarea v-model="requestParam.textToSend2" class="form-control" rows="3" placeholder="输入要发送的消息" ></textarea>
          </div>
          
        <div class="form-group" v-show="requestParam.selectedImgUrl != '' ">
          <label>要发送的图片</label>
          <img :src="requestParam.selectedImgUrl" class="img-responsive" width=640px height=480px/>
          <button @click.stop.prevent="removePic" class="btn btn-danger btn-sm">删除图片</button>
        </div>  

        <div class="form-group" v-show="requestParam.selectedImgUrl == '' ">
          <label for="exampleInputFile">选择要发送的图片</label>
          <input type="file" @change="fileChange($event)" accept="image/png,image/jpeg,image/gif" name="imgToSend" id="imgToSend">
        </div>

        <div class="form-group">
          <label for="exampleInputEmail1">任务处理类</label>
          <input type="text" v-model="requestParam.jobClassName" class="form-control" placeholder="输入运行任务的类">
        </div>
    
        <div class="box-footer">
          <button type="reset" class="btn btn-warning">重置</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>
</script>

<script type="text/x-template" id="readScheduledTaskTemplate">
<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h4 class="box-title">查看定时任务</h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form">
        
          <div class="form-group">
            <label for="exampleInputEmail1">定时任务名称</label>
            <input type="text" readonly v-model="list.keyword" class="form-control">
          </div>

          <div class="form-group">
            <label for="exampleInputEmail1">运行时间（Cron表达式：秒 分 时 日 月 星期 年）</label>
            <input type="text" readonly v-model="list.scheduledTime" class="form-control">
            <button @click.stop.prevent="testCron" class="btn btn-default btn-sm">测试Cron</button>
          </div>

          <!-- Select multiple-->
          <div class="form-group">
            <label>消息接收群</label>
            <select multiple readonly v-model="list.wxGroupSelected" class="form-control" id="wxGroupSelected">             
              <option v-for="item in list.wxGroupAll" :value="item.userName">{{item.name}}</option>
            </select>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>消息接收好友</label>
            <textarea readonly v-model="list.friendReceivers" class="form-control" rows="3" ></textarea>
          </div>

          <!-- Select -->
          <div class="form-group"  style="display:none">
            <label>选择分组</label>
            <select class="form-control" name="customGroupSelected">
              <option>请选择</option>
            </select>
          </div>          

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之1</label>
            <textarea readonly v-model="list.textToSend1" class="form-control" rows="3" ></textarea>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之2</label>
            <textarea readonly v-model="list.textToSend2" class="form-control" rows="3" ></textarea>
          </div>
          
        <div class="form-group" v-if="list.selectedImgUrl != '' ">
          <label>要发送的图片</label>
          <img :src="list.selectedImgUrl" class="img-responsive" width=640px height=480px/>
        </div>

        <div class="form-group">
          <label for="exampleInputEmail1">任务处理类</label>
          <input type="text" readonly v-model="list.jobClassName" class="form-control" >
        </div>
    
        <div class="box-footer">
          <button @click.stop.prevent="exit" class="btn btn-primary">退出</button>
          <button @click.stop.prevent="edit" class="btn btn-primary">编辑</button>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>
</script>

<script type="text/x-template" id="editScheduledTaskTemplate">
<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h4 class="box-title">编辑定时任务</h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form" @submit.prevent="formSubmit()">
        
          <div class="form-group">
            <label for="exampleInputEmail1">定时任务名称</label>
            <input type="text" readonly v-model="list.keyword" class="form-control" placeholder="输入任务名称">
          </div>

          <div class="form-group">
            <label for="exampleInputEmail1">运行时间（Cron表达式：秒 分 时 日 月 星期 年）</label>
            <input type="text" v-model="list.scheduledTime" class="form-control" placeholder="输入任务运行时间">
            <button @click.stop.prevent="testCron" class="btn btn-default btn-sm">测试Cron</button>
          </div>

          <!-- Select multiple-->
          <div class="form-group">
            <label>消息接收群</label>
            <select multiple v-model="list.wxGroupSelected" class="form-control" id="wxGroupSelected">             
              <option v-for="item in list.wxGroupAll" :value="item.userName">{{item.name}}</option>
            </select>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>消息接收好友</label>
            <textarea v-model="list.friendReceivers" class="form-control" rows="3" placeholder="输入接收消息的好友昵称（多个用户用英文;分割）" ></textarea>
          </div>

          <!-- Select -->
          <div class="form-group"  style="display:none">
            <label>选择分组</label>
            <select class="form-control" name="customGroupSelected">
              <option>请选择</option>
            </select>
          </div>          

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之1</label>
            <textarea v-model="list.textToSend1" class="form-control" rows="3" placeholder="输入要发消送的息" ></textarea>
          </div>

          <!-- textarea -->
          <div class="form-group">
            <label>要发送的消息之2</label>
            <textarea v-model="list.textToSend2" class="form-control" rows="3" placeholder="输入要发送的消息" ></textarea>
          </div>
          
        <div class="form-group" v-show="list.selectedImgUrl != '' " id="oldPic">
          <label>要发送的图片</label>
          <img :src="list.selectedImgUrl" class="img-responsive" width=640px height=480px/>
          <button @click.stop.prevent="removePic" class="btn btn-danger btn-sm">删除图片</button>
        </div>

        <div class="form-group" id="selectPic" v-show="list.selectedImgUrl == '' ">
          <label for="exampleInputFile">选择要发送的图片</label>
          <input type="file" @change="fileChange($event)" accept="image/png,image/jpeg,image/gif" id="imgToSend">          
        </div>

        <div class="form-group">
          <label for="exampleInputEmail1">任务处理类</label>
          <input type="text" v-model="list.jobClassName" class="form-control" placeholder="输入运行任务的类">
        </div>
    
        <div class="box-footer">
          <button @click.stop.prevent="exit" class="btn btn-warning">退出</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>
</script>

<script type="text/x-template" id="adminListTemplate">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">管理员列表</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body table-responsive no-padding">
        <table class="table table-bordered table-hover">
            <thead>        
                <tr>
                    <th>账号</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.account}}</td>                    
                    <td v-if="item.status == 0">
                        <span class="label label-success">启用</span>
                    </td>
                    <td v-else>
                        <span class="label label-default">停用</span>
                    </td>
                                       
                    <td>
                        <button v-if="item.status == 0" class="btn btn-xs btn-warning" :value="item.account" @click.self="buttonClick($event, 'DISABLE_ADMIN')" title="停用">
                            <i class="fa fa-toggle-on" @click.stop="buttonClick($event, 'DISABLE_ADMIN')">
                            </i>
                        </button>
                        <button v-else class="btn btn-xs btn-warning" :value="item.account" @click.self="buttonClick($event, 'ENABLE_ADMIN')" title="启用">
                            <i class="fa fa-toggle-off" @click.stop="buttonClick($event, 'ENABLE_ADMIN')">
                            </i>
                        </button>                       

                        <button class="btn btn-xs btn-danger" :value="item.account" @click.self="buttonClick($event, 'REMOVE_ADMIN')" title="删除">
                            <i class="fa fa-trash-o" @click.stop="buttonClick($event, 'REMOVE_ADMIN')">
                            </i>
                        </button>

                    </td>
                </tr>
            </tbody>
        </table>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
    
</script>

<script type="text/x-template" id="createAdminTemplate">
<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h4 class="box-title">新增管理员</h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form" @submit.prevent="formSubmit()"">
        
          <div class="form-group">
            <label for="exampleInputEmail1">账号</label>
            <input type="text" v-model="requestParam.account" class="form-control" placeholder="输入账号">
          </div>

          <div class="form-group">
            <label for="exampleInputEmail1">密码</label>
            <input type="password" v-model="requestParam.password" class="form-control" placeholder="输入密码">
          </div>

          <div class="form-group">
            <input type="password" v-model="requestParam.passwordAgain" class="form-control" placeholder="请再次输入新密码">
          </div>

          <div class="form-group" v-if="requestParam.passwordAgain != '' && requestParam.passwordAgain != requestParam.password">
            <span class="label label-warning">两次输入密码不一致</span>
          </div>    
        <div class="box-footer">
          <button type="submit" class="btn btn-primary">保存</button>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>
</script>

<script type="text/x-template" id="changePasswordTemplate">
<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h4 class="box-title">修改密码</h4>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form" @submit.prevent="formSubmit()"">
        
          <div class="form-group">
            <label for="exampleInputEmail1">账号</label>
            <input type="text" readonly v-model="account" class="form-control">
          </div>

          <div class="form-group">
            <label for="exampleInputEmail1">新密码</label>
            <input type="password" v-model="password" class="form-control" placeholder="请输入新密码">
          </div>

          <div class="form-group">
            <input type="password" v-model="passwordAgain" class="form-control" placeholder="请再次输入新密码">
          </div>
    
          <div v-if="passwordAgain!= '' && password != passwordAgain" class="form-group">
           <span class="label label-danger">两次输入密码不一致</span>
          </div>

        <div class="box-footer">
          <button type="submit" class="btn btn-primary">保存</button>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>
</script>

<script type="text/x-template" id="readLogTemplate">
<div class="row">
  <div class="col-md-12">
    <!-- general form elements disabled -->
    <div class="box box-warning">
      <div class="box-header with-border">
        <h5 class="box-title">查看系统日志 </h5>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <form role="form">           

          <!-- textarea -->
          <div class="form-group">
            <textarea readonly class="form-control" v-model="list" rows="13" id="logarea"></textarea>
          </div>
    
        <div class="box-footer">
          <button @click.stop.prevent="exit($event, 'EXIT_LOG')" class="btn btn-warning">退出</button>
          <button @click.stop.prevent="refresh($event, 'REFRESH_LOG')" class="btn btn-primary">刷新</button>
        </div>

        </form>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!--/.col (right) -->
</div>
</script>

<script type="text/x-template" id="friendAutoReplyTemplate">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">好友自动回复状态</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body table-responsive no-padding">
        <table class="table table-bordered table-hover">
            <thead>        
                <tr>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td v-if="list">
                        <span class="label label-success">开启</span>
                    </td>
                    <td v-else>
                        <span class="label label-default">停用</span>
                    </td>
                                       
                    <td>
                        <button v-if="list" class="btn btn-xs btn-warning"  @click.self="buttonClick($event, 'DISABLE_FRIEND_AUTO_REPLY')" title="停用">
                            <i class="fa fa-toggle-on" @click.stop="buttonClick($event, 'DISABLE_FRIEND_AUTO_REPLY')">
                            </i>
                        </button>
                        <button v-else class="btn btn-xs btn-warning"  @click.self="buttonClick($event, 'ENABLE_FRIEND_AUTO_REPLY')" title="开启">
                            <i class="fa fa-toggle-off" @click.stop="buttonClick($event, 'ENABLE_FRIEND_AUTO_REPLY')">
                            </i>
                        </button>                       

                    </td>
                </tr>
            </tbody>
        </table>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
    
</script>

<script type="text/x-template" id="robotLoginTemplate">
<div class="row">
  <div class="col-md-12">

    <div class="text-center" v-if="qrurl == ''">
      <button @click="robotLogin" type="button" class="btn btn-w3r">点击登录机器人</button>
    </div>

    <div class="text-center" v-else>
      <img :src="qrurl" class="img-rounded" height="230em" width="230em/" />
    </div>

    <div class="text-center" v-if="msg != ''">
      <h3>
        <span class="label label-primary">{{msg}}</span>
      </h3>        
    </div>

  </div>
</div>

</script>

     
<script src="${pageContext.request.contextPath}/static/js/custom/myapp.js"></script>

<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. Slimscroll is required when using the
     fixed layout. -->
</body>

</html>